<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="移动店铺" name="wapShop">
                <div class="navigation-container">
                    <el-tabs v-model="wapShop" type="card" @tab-click="wapShopHandleClick">
                        <el-tab-pane label="店铺主页" name="shopIndex">
                            <div class="view-container">
                                <div class="shop-home-page">
                                    <div class="ss-default-tips-wrapper"></div>
                                    <div class="main-content">
                                        <div class="home-page-preview">
                                            <div>
                                                <div class="config-preview" slot="preview">
                                                    <span class="EC3">11111</span>
                                                </div>
                                                <div class="components-wrapper" style="background: rgb(250, 250, 250)">
                                                    <div class="component-wrapper">
                                                        <div class="search-bar-previewer component-container">
                                                            <div class="component-layout active-index">
                                                                <div>
                                                                    <div class="search-bar-content">
                                                                        <div class="search-container">
                                                                            <img src="~@/images/icon_search.svg" class="search-icon" />
                                                                            <span class="EC9 ET4" style="color: rgb(153, 153, 153)"
                                                                                >搜索</span
                                                                            >
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="active"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="bottom-navigation">
                                                    <div class="navigation-bar" style="width: 33.3333%">
                                                        <div class="tap-area">
                                                            <img src="~@/images/home.png" alt="icon" class="top-icon" />
                                                            <div class="icon-text">首页</div>
                                                        </div>
                                                    </div>
                                                    <div class="navigation-bar" style="width: 33.3333%">
                                                        <div class="tap-area">
                                                            <img src="~@/images/studyCenter.png" alt="icon" class="top-icon" />
                                                            <div class="icon-text">学习中心</div>
                                                        </div>
                                                    </div>
                                                    <div class="navigation-bar" style="width: 33.3333%">
                                                        <div class="tap-area">
                                                            <img src="~@/images/mine.png" alt="icon" class="top-icon" />
                                                            <div class="icon-text">我的</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="home-page-right">
                                            <div class="right-title">搭建店铺主页</div>
                                            <div class="right-desc">左图是店铺的预览效果</div>
                                            <div class="home-page-desc">
                                                <span>
                                                    主页是用户看到店铺的第一印象，您可以点击【编辑主页模板】使用模板快速搭建，也可以点击【自定义主页】个性化搭建。店铺主页支持同时应用于移动店铺。
                                                </span>
                                                <div class="btn-wrapper">
                                                    <el-button type="primary">搭建店铺主页</el-button>
                                                    <el-button type="default">自定义主页</el-button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ss-loading-mask" style="display: none">
                                        <div class="ss-loading-spinner">
                                            <svg viewBox="25 25 50 50" class="circular">
                                                <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                            </svg>
                                            <p class="ss-loading-text"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="个人中心" name="userCenter">
                            <div class="view-container">
                                <div class="box">
                                    <div class="personal-container EC12_BG">
                                        <!-- 左边 -->
                                        <div class="previewer-container">
                                            <img src="~@/images/tab_bar.png" alt="" />
                                            <!-- 头像 -->
                                            <div class="previewer-wrapper">
                                                <div class="base-info-container">
                                                    <div class="personal-info">
                                                        <div class="personal-self-info">
                                                            <div class="personal-self-base-info">
                                                                <div class="personal-avatar">
                                                                    <img
                                                                        src="~@/images/head-img.jpg"
                                                                        alt="avatar"
                                                                        class="personal-avatar-img"
                                                                    />
                                                                </div>
                                                                <div class="personal-desc">
                                                                    <div class="personal-name ET2 EC12">Keeley Thiel</div>
                                                                </div>
                                                                <div class="personal-message">
                                                                    <img src="~@/images/msg_icon.svg" alt="message icon" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="personal-account-info EC12_BG">
                                                            <div class="personal-acount-item" v-show="myBuy">
                                                                <div class="personal-account-value ET3">100</div>
                                                                <div class="personal-account-title ET5 EC7">我的已购</div>
                                                            </div>

                                                            <div class="personal-acount-item" v-show="myCoupons">
                                                                <div class="personal-account-value ET3">50</div>
                                                                <div class="personal-account-title ET5 EC7">优惠券</div>
                                                            </div>
                                                            <div class="personal-acount-item" v-show="myCollection">
                                                                <div class="personal-account-value ET3">200</div>
                                                                <div class="personal-account-title ET5 EC7">我的收藏</div>
                                                            </div>
                                                            <div class="personal-acount-item" v-show="myAccount">
                                                                <div class="personal-line"></div>
                                                                <div class="personal-account-value ET3">
                                                                    <span class="ET5">￥</span>16万
                                                                </div>
                                                                <div class="personal-account-title ET5 EC7">我的账户</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 订单 -->
                                            <div class="my-order-box">
                                                <div>
                                                    <div class="order-module-top">
                                                        <div class="order-module-title">订单</div>
                                                        <div class="order-module-all">
                                                            <p class="order-find-all">查看全部订单</p>
                                                            <img src="~@/images/icon_next.png" />
                                                        </div>
                                                    </div>
                                                    <div class="order-module previewer-wrapper">
                                                        <div class="order-item">
                                                            <div class="font_family icon-payment_icon order-item-icon"></div>
                                                            <div class="order-item-text">待付款</div>
                                                        </div>
                                                        <div class="order-item">
                                                            <div class="font_family icon-receipt_icon order-item-icon"></div>
                                                            <div class="order-item-text">待收货</div>
                                                        </div>
                                                        <div class="order-item">
                                                            <div class="font_family icon-evaluation_icon order-item-icon"></div>
                                                            <div class="order-item-text">待评价</div>
                                                        </div>
                                                        <div class="personal-line"></div>
                                                        <div class="order-item">
                                                            <div class="font_family icon-order_icon order-item-icon"></div>
                                                            <div class="order-item-text">全部订单</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 学习中心 -->
                                            <div class="previewer-wrapper">
                                                <div class="pc-cell learn-center-container pc-cell-alone">
                                                    <div class="pc-cell-wrapper">
                                                        <span class="pc-cell-icon-slot"></span>
                                                        <span class="pc-cell-title personal-center-font-weight">学习中心</span>
                                                        <span class="pc-cell-slot"
                                                            ><span
                                                                class="distribution-tips ET4 EC9"
                                                                style="color: rgb(12, 187, 8); background-color: rgba(12, 187, 8, 0.16)"
                                                                >新学习报告</span
                                                            ></span
                                                        >
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 学习工具 -->
                                            <div class="previewer-wrapper">
                                                <div class="study-assistance-container EC12_BG">
                                                    <div class="module-title personal-center-font-weight">学习工具</div>
                                                    <div class="study-style2">
                                                        <div class="study-item">
                                                            <img
                                                                src="https://static-resource.xiaoeknow.com/b_static/shopdiy/microPageManage/fonts/subscription.svg?59f576ae796ab647c8336cfbc90400fe&amp;app_id=appwhrzr6099623"
                                                                alt="我的课程"
                                                                class="study-img"
                                                            />
                                                            <div class="study-text EC7 ET5">我的课程</div>
                                                        </div>
                                                        <div class="study-item">
                                                            <img
                                                                src="https://static-resource.xiaoeknow.com/b_static/shopdiy/microPageManage/fonts/punch_card.svg?67b8b63a6686663a84703cc93ba2622b&amp;app_id=appwhrzr6099623"
                                                                alt="打卡"
                                                                class="study-img"
                                                            />
                                                            <div class="study-text EC7 ET5">打卡</div>
                                                        </div>
                                                        <div class="study-item">
                                                            <img
                                                                src="https://static-resource.xiaoeknow.com/b_static/shopdiy/microPageManage/fonts/community.svg?7f1dd969ac516f3f71d97a683eda9c66&amp;app_id=appwhrzr6099623"
                                                                alt="圈子"
                                                                class="study-img"
                                                            />
                                                            <div class="study-text EC7 ET5">圈子</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 推广中心 -->
                                            <div class="previewer-wrapper essential_tools">
                                                <div class="necessary-tool-container">
                                                    <div class="necessary-style1">
                                                        <div class="pc-cell pc-cell-alone">
                                                            <div class="pc-cell-wrapper">
                                                                <span class="pc-cell-icon-slot">
                                                                    <img src="~@/images/tg-common.png" alt="" />
                                                                </span>
                                                                <span class="pc-cell-title personal-center-font-weight">推广中心</span>
                                                                <span class="pc-cell-slot">
                                                                    <span class="distribution-tips ET4 EC9"> 赚高额佣金 </span>
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <div class="pc-cell">
                                                            <div class="pc-cell-wrapper">
                                                                <span class="pc-cell-icon-slot">
                                                                    <img src="~@/images/tg-common.png" alt="" />
                                                                </span>
                                                                <span class="pc-cell-title personal-center-font-weight">我的成就</span>
                                                                <span class="pc-cell-slot"></span>
                                                            </div>
                                                        </div>
                                                        <div class="pc-cell">
                                                            <div class="pc-cell-wrapper">
                                                                <span class="pc-cell-icon-slot">
                                                                    <img src="~@/images/tg-common.png" alt="" />
                                                                </span>
                                                                <span class="pc-cell-title personal-center-font-weight">兑换中心</span>
                                                                <span class="pc-cell-slot"></span>
                                                            </div>
                                                        </div>
                                                        <div class="pc-cell">
                                                            <div class="pc-cell-wrapper">
                                                                <span class="pc-cell-icon-slot">
                                                                    <img src="~@/images/tg-common.png" alt="" />
                                                                </span>
                                                                <span class="pc-cell-title personal-center-font-weight">赠送记录</span>
                                                                <span class="pc-cell-slot"></span>
                                                            </div>
                                                        </div>
                                                        <div class="pc-cell">
                                                            <div class="pc-cell-wrapper">
                                                                <span class="pc-cell-icon-slot">
                                                                    <img src="~@/images/tg-common.png" alt="" />
                                                                </span>
                                                                <span class="pc-cell-title personal-center-font-weight">我的奖品</span>
                                                                <span class="pc-cell-slot"></span>
                                                            </div>
                                                        </div>
                                                        <div class="pc-cell">
                                                            <div class="pc-cell-wrapper">
                                                                <span class="pc-cell-icon-slot">
                                                                    <img src="~@/images/tg-common.png" alt="" />
                                                                </span>
                                                                <span class="pc-cell-title personal-center-font-weight">账号设置</span>
                                                                <span class="pc-cell-slot"></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 底部导航栏 -->
                                            <div class="bottom-tabbar EC12_BG">
                                                <div class="bottom-tab" style="width: 33.3333%">
                                                    <img
                                                        src="http://wechatapppro-1252524126.file.myqcloud.com/apprnDA0ZDw4581/image/348729353cd38913d27c3333bfb7585f.png"
                                                        class="p-tab-img"
                                                    />
                                                    <div class="tab-text ET5">首页</div>
                                                </div>
                                                <div class="bottom-tab" style="width: 33.3333%">
                                                    <img
                                                        src="http://wechatapppro-1252524126.file.myqcloud.com/appAKLWLitn7978/image/cmVzb3VyY2UtY291cnNlQXJ0aWNsZS05ODQ1OTA2Mg.png"
                                                        class="p-tab-img"
                                                    />
                                                    <div class="tab-text ET5">学习中心</div>
                                                </div>
                                                <div class="bottom-tab" style="width: 33.3333%">
                                                    <i class="font_family iconfont icon-my_pre1" style="color: rgb(12, 187, 8)"></i>
                                                    <div class="tab-text" style="">我的</div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 右边 -->
                                        <div style="position: relative">
                                            <div class="editor-container">
                                                <el-collapse accordion>
                                                    <el-collapse-item>
                                                        <template slot="title">
                                                            <el-checkbox v-model="checked_info" disabled></el-checkbox>基本信息
                                                        </template>
                                                        <div class="collapse-content">
                                                            <div class="editor-item">
                                                                <div class="editor-item-title"><span>我的已购：</span></div>
                                                                <div class="editor-item-show">
                                                                    <el-radio-group v-model="buy" @change="selectBuy">
                                                                        <el-radio :label="true">显示</el-radio>
                                                                        <el-radio :label="false">隐藏</el-radio>
                                                                    </el-radio-group>
                                                                </div>
                                                            </div>
                                                            <div class="editor-item">
                                                                <div class="editor-item-title"><span>优惠券：</span></div>
                                                                <div class="editor-item-show">
                                                                    <el-radio-group v-model="coupons" @change="selectCoupons">
                                                                        <el-radio :label="true">显示</el-radio>
                                                                        <el-radio :label="false">隐藏</el-radio>
                                                                    </el-radio-group>
                                                                </div>
                                                            </div>
                                                            <div class="editor-item">
                                                                <div class="editor-item-title"><span>我的收藏：</span></div>
                                                                <div class="editor-item-show">
                                                                    <el-radio-group v-model="collection" @change="selectCollection">
                                                                        <el-radio :label="true">显示</el-radio>
                                                                        <el-radio :label="false">隐藏</el-radio>
                                                                    </el-radio-group>
                                                                </div>
                                                            </div>
                                                            <div class="editor-item">
                                                                <div class="editor-item-title"><span>我的账户：</span></div>
                                                                <div class="editor-item-show">
                                                                    <el-radio-group v-model="account" @change="selectAccount">
                                                                        <el-radio :label="true">显示</el-radio>
                                                                        <el-radio :label="false">隐藏</el-radio>
                                                                    </el-radio-group>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </el-collapse-item>
                                                    <div class="no-collapse-item">
                                                        <div class="el-collapse-item__header">
                                                            <el-checkbox v-model="checked_order"></el-checkbox>
                                                            <span>我的订单</span>
                                                        </div>
                                                    </div>
                                                    <div class="no-collapse-item">
                                                        <div class="el-collapse-item__header">
                                                            <el-checkbox v-model="checked_center"></el-checkbox>
                                                            <span>学习中心</span>
                                                        </div>
                                                    </div>
                                                    <el-collapse-item>
                                                        <template slot="title">
                                                            <el-checkbox v-model="checked_tool"></el-checkbox>学习工具
                                                        </template>
                                                        <div>
                                                            与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
                                                        </div>
                                                        <div>
                                                            在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
                                                        </div>
                                                    </el-collapse-item>
                                                    <el-collapse-item>
                                                        <template slot="title">
                                                            <el-checkbox v-model="checked_necessary"></el-checkbox>必备工具
                                                        </template>
                                                    </el-collapse-item>
                                                </el-collapse>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="店铺导航" name="shopNav">店铺导航</el-tab-pane>
                        <el-tab-pane label="模板库" name="templateLibrary">模板库</el-tab-pane>
                    </el-tabs>
                </div>
            </el-tab-pane>
            <el-tab-pane label="微页面" name="microPage">微页面</el-tab-pane>
            <el-tab-pane label="店铺风格" name="style">店铺风格</el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: 'wapShop',
            wapShop: 'shopIndex',
            checked_info: true,
            checked_order: false,
            checked_center: false,
            checked_tool: false,
            checked_necessary: false,
            buy: true,
            coupons: true,
            collection: true,
            account: true,
            myBuy: true,
            myCoupons: true,
            myCollection: true,
            myAccount: true,
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        wapShopHandleClick(tab, event) {
            console.log(tab, event);
        },
        selectBuy(v) {
            v == false ? this.myBuy = false : this.myBuy = true;
        },
        selectCoupons(v) {
            v == false ? this.myCoupons = false : this.myCoupons = true;
        },
        selectCollection(v) {
            v == false ? this.myCollection = false : this.myCollection = true;
        },
        selectAccount(v) {
            v == false ? this.myAccount = false : this.myAccount = true;
        },
    }
};
</script>

<style scoped>
@import '~@/components/common/css/common.css';
/* 移动店铺*/
.navigation-container {
    padding: 20px;
}
.view-container {
    position: relative;
    margin: 0 auto;
}
/* 移动店铺- 店铺主页*/
.shop-home-page {
    font-size: 14px;
    padding: 20px 0;
    min-height: 500px;
}
.shop-home-page .main-content {
    width: 100%;
    min-height: 680px;
    position: relative;
}
.shop-home-page .main-content .home-page-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 375px;
    height: 677px;
    border: 1px solid #eee;
}
.config-preview {
    position: relative;
    background-image: url(~@/images/img_top_weixin.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 65px;
    box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 10%);
}
.config-preview span {
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 12px;
    font-weight: bold;
    font-size: 16px;
    left: 0;
}
.EC3 {
    color: #333333;
}
.shop-home-page .main-content .home-page-preview .components-wrapper {
    width: 100%;
    height: 562px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fafafa;
}
.search-bar-previewer {
    margin-bottom: 0 !important;
}
.component-layout {
    position: relative;
    width: 100%;
    position: relative;
    box-sizing: content-box;
    background-color: transparent;
    cursor: move;
}
.image-ad-previewer .component-layout,
.category-nav-previewer .component-layout,
.topic-ad-previewer .component-layout,
.search-bar-previewer .component-layout,
.foa-previewer .component-layout {
    margin-bottom: 0;
}
.component-layout {
    cursor: pointer !important;
}
.search-bar-previewer .search-bar-content {
    position: relative;
    padding: 12px;
}
.search-bar-previewer .search-bar-content .search-container {
    width: 100%;
    height: 32px;
    background: #f5f5f5;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-bar-previewer .search-bar-content .search-container .search-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}
.ET4 {
    font-size: 14px;
}
.EC9 {
    color: #b2b2b2;
}
.component-layout .active {
    position: absolute;
    z-index: 11;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid #2a75ed;
    pointer-events: none;
}
.active {
    border: none !important;
}
.shop-home-page .main-content .home-page-preview .bottom-navigation {
    width: 100%;
    display: flex;
    height: 49px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 1px 0px 0px rgb(0 0 0 / 25%);
    border-top: 1px solid #eee;
}
.shop-home-page .main-content .home-page-preview .bottom-navigation .navigation-bar .tap-area {
    position: relative;
    height: 48px;
    padding-top: 8px;
    margin: 0 auto;
    text-align: center;
    vertical-align: center;
}
.shop-home-page .main-content .home-page-preview .bottom-navigation .navigation-bar .tap-area .top-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    font-size: 10px;
}
.shop-home-page .main-content .home-page-preview .bottom-navigation .navigation-bar .tap-area .icon-text {
    width: 100%;
    text-align: center;
    position: absolute;
    color: #b2b2b2;
    left: 0;
    bottom: 0;
    font-size: 12px;
    line-height: 25px;
    transform: scale(0.84, 0.84);
}
.shop-home-page .main-content .home-page-right {
    padding-left: 410px;
    padding-right: 20px;
    box-sizing: border-box;
}
.shop-home-page .main-content .home-page-right .right-title {
    height: 24px;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    line-height: 24px;
    margin-bottom: 8px;
}
.shop-home-page .main-content .home-page-right .right-desc {
    height: 22px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    line-height: 22px;
}
.shop-home-page .main-content .home-page-desc {
    margin-top: 8px;
    line-height: 22px;
    color: #666;
    display: flex;
    flex-direction: column;
}
.shop-home-page .main-content .home-page-right .btn-wrapper {
    margin-top: 20px;
}
/* 移动店铺- 个人中心*/
.box {
    min-height: 500px;
    background: #fff;
    padding-top: 20px;
}
.personal-container {
    display: flex;
    color: #333;
}
.EC12_BG {
    background-color: #fff;
}
.previewer-container {
    position: relative;
    padding-bottom: 82px;
    width: 375px;
    background-color: #f5f6f9;
    box-shadow: 2px 3px 5px #ececec;
    min-height: 700px;
}
.previewer-container .previewer-wrapper {
    cursor: pointer;
    position: relative;
}
.base-info-container {
    background: #f0f1f3;
    margin-bottom: 12px;
}
.personal-self-info {
    background: url(~@/images/bg.png) center center;
}
.personal-self-base-info {
    display: flex;
    padding: 32px 18px;
}
.personal-self-base-info .personal-avatar {
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 60px;
    background: #ddeeff;
}
.personal-self-base-info .personal-avatar .personal-avatar-img {
    width: 100%;
    height: 100%;
}
.personal-self-base-info .personal-desc {
    margin-left: 16px;
}
.ET2 {
    font-size: 18px;
}
.EC12 {
    color: #ffffff;
}
.personal-self-base-info .personal-message {
    flex-grow: 1;
    text-align: right;
}
.personal-account-info {
    display: flex;
    align-items: center;
    text-align: center;
}
.personal-account-info .personal-acount-item {
    display: flex;
    flex-direction: column;
    align-content: center;
    height: 88px;
    position: relative;
    flex-grow: 1;
}
.personal-account-info .personal-acount-item .personal-account-value {
    margin-top: 18px;
    height: 26px;
    color: #333333;
    font-size: 20px;
    font-weight: 700;
    font-family: 'D-DIN';
    text-align: center;
    line-height: 26px;
}
.personal-account-info .personal-acount-item .personal-account-title {
    margin-top: 4px;
    height: 18px;
    color: #666666;
    font-size: 12px;
    font-weight: 400;
    font-family: 'PingFang SC';
    text-align: center;
    line-height: 18px;
}
.previewer-container .my-order-box {
    overflow: hidden;
}
.previewer-container .order-module-top {
    background: white;
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
}
.previewer-container .order-module-top .order-module-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}
.previewer-container .order-module-top .order-module-all {
    font-size: 12px;
    color: #999;
    display: flex;
}
.previewer-container .order-module-top img {
    height: 16px;
    margin-right: -6px;
}
.previewer-container .order-module {
    padding: 0 12px;
    display: flex;
    align-items: center;
    /* width: 379px; */
    height: 84px;
    background: white;
    font-size: 28px;
}
.previewer-container .order-module .order-item {
    display: flex;
    flex: 1;
    align-items: center;
    flex-direction: column;
}
.previewer-container .order-module .order-item .order-item-icon {
    font-size: 28px;
}
.icon-payment_icon:before {
    content: '\e7de';
}
.icon-receipt_icon:before {
    content: '\e7df';
}
.icon-evaluation_icon:before {
    content: '\e7dc';
}
.icon-order_icon:before {
    content: '\e7dd';
}
.previewer-container .order-module .order-item .order-item-text {
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    line-height: 12px;
}
.previewer-container .order-module .personal-line {
    width: 1px;
    height: 24px;
    background: #e2e2e2;
    border-radius: 1px;
    filter: blur(0px);
}
.pc-cell.pc-cell-alone {
    margin-bottom: 12px;
}
.previewer-container .learn-center-container {
    margin-top: 12px;
}
.pc-cell {
    padding-left: 16px;
    background-color: #fff;
}
.pc-cell-wrapper {
    display: flex;
    align-items: center;
    height: 60px;
    background: url(~@/images/icon_next.png) no-repeat;
    background-position-x: calc(100% - 10px);
    background-position-y: center;
    background-size: 20px;
}
.pc-cell:not(.pc-cell-alone) + .pc-cell .pc-cell-wrapper {
    border-top: 1px solid #f5f5f5;
}
.pc-cell-icon-slot,
.pc-cell-img {
    margin-right: 12px;
}
.previewer-container .pc-cell.learn-center-container .pc-cell-icon-slot {
    margin-right: 0;
}
.personal-center-font-weight {
    font-weight: bold;
}
.pc-cell-slot {
    flex-grow: 1;
    padding-right: 36px;
    text-align: right;
}
.previewer-container .learn-center-container .distribution-tips {
    display: inline-block;
    text-align: center;
    width: 92px;
    height: 20px;
    border-radius: 10px;
}
.module-title {
    padding: 18px 18px 0;
}
.study-style2 {
    display: flex;
    flex-wrap: wrap;
    padding-top: 18px;
    font-size: 0;
    text-align: center;
}
.study-style2 .study-item {
    margin-bottom: 20px;
    width: 20%;
}
.study-style2 .study-item .study-img {
    width: 24px;
    height: 24px;
}
.study-style2 .study-item .study-text {
    margin-top: 10px;
}
.ET5 {
    font-size: 12px;
}
.EC7 {
    color: #666;
}
.previewer-container .previewer-wrapper.essential_tools {
    margin-top: 12px;
}
.pc-cell-icon-slot img {
    width: 24px;
    height: 24px;
    display: block;
}
.necessary-style1 .distribution-tips {
    display: inline-block;
    text-align: center;
}
.previewer-container .bottom-tabbar {
    position: absolute;
    bottom: 0;
    display: flex;
    padding-top: 4px;
    width: 100%;
    height: 49px;
}
.previewer-container .bottom-tabbar .bottom-tab {
    text-align: center;
}
.previewer-container .bottom-tabbar .bottom-tab .p-tab-img {
    width: 24px;
    height: 24px;
}
.previewer-container .bottom-tabbar .bottom-tab .tab-text {
    color: #c0c0c0;
    transform: scale(0.84, 0.84);
}
.font_family {
    font-family: 'font_family' !important;
    font-size: 16px;
    font-style: normal;
}
.icon-my_pre1:before {
    content: '\e794';
}
.previewer-container .previewer-wrapper.active:after, .previewer-container .previewer-wrapper:hover:after {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid #2878f0;
}
.previewer-container .previewer-wrapper:hover:after {
    border: 1px dashed #2878f0;
}
/* 右边自定义 */
.editor-container {
    align-self: baseline;
    margin-left: 24px;
    width: 382px;
    border: 1px solid #f5f6f5;
}
.editor-item {
    margin-top: 24px;
    display: flex;
}
/* .collapse-content:first-child {
    margin-top: 0;
} */
.editor-item .editor-item-title {
    width: 114px;
    text-align: right;
    color: #333;
}

</style>

<style>
.el-tabs__header {
    margin: 0;
}
.el-tabs__content {
    background: #fff;
}
.el-collapse-item__header {
    height: 55px;
    padding-left: 20px;
    font-size: 14px;
    color: #333;
    font-weight: bold;
}
.el-collapse-item__header .el-checkbox {
    margin-right: 8px;
}
.editor-container .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background: #b2b2b2;
    border-color: #b2b2b2;
    border-radius: 2px;
}
.editor-container .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    border-color: #fff;
}
</style>